/*
 * @Author: @miao-xiongmei 2575733397@qq.com
 * @Date: 2022-09-07 15:02:11
 * @LastEditors: @miao-xiongmei 2575733397@qq.com
 * @LastEditTime: 2022-09-14 16:46:35
 * @FilePath: \six-groups-of-jieshuibao\src\views\parkManagement\ParkManagement.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from 'react'
import '../parkManagement/css/ParkManagement.css'
import Store from '../../store/index.js'
import { Switch, Router } from 'react-router-dom';
import { Button, Table, Input, Cascader, Divider, Modal, message } from 'antd';
import Welcome from '../../components/welcome'
import Title from '../../components/title/title'
import { createSearchParkAction, createDelBankAction } from '../../store/action.js'


// 省市区下拉框数据
const options = [
    {
        value: '四川省',
        label: '四川省',
        children: [
            {
                value: '成都市',
                label: '成都市',
                children: [
                    {
                        value: '武侯区',
                        label: '武侯区',
                    },
                ],
            },
        ],
    },
    {
        value: '山东省',
        label: '山东省',
        children: [
            {
                value: '潍坊市',
                label: '潍坊市',
                children: [
                    {
                        value: '坊子区',
                        label: '坊子区',
                    },
                ],
            },
        ],
    },
]




const BankManagement = ({ history, location }) => {
    const [bankTable, setBankTable] = useState(Store.getState().bankTable);
    const [newBankTable, setNewBankTable] = useState(bankTable)
    const [searchName, setSearchName] = useState();
    const [searchAddress, setSearchAddress] = useState();
    useEffect(() => {

        let unSubscribe = Store.subscribe(() => {
            setBankTable(Store.getState().bankTable)
            setNewBankTable(Store.getState().bankTable)
        });
        return () => {
            unSubscribe();
        }
    })
    // 删除
    const delBank = (name, key) => {
        Modal.confirm({
            title: '删除园区',
            content: `你确认删除${name}吗？`,
            onOk: () => {
                Store.dispatch(createDelBankAction(key))
                message.success('删除成功!')
            }
        })
    }

    // 查询
    const searchPark = (searchName, searchAddress) => {
        if (!searchAddress) {
            searchAddress = ''
        } else {
            searchAddress = searchAddress.join('')
        }
        if (!searchName) {
            searchName = ''
        }
        const searchItem = { 'searchName': searchName, 'searchAddress': searchAddress }
        console.log(searchAddress)
        const searchTable = [];
        bankTable.map(item => {
            const address = [item.province, item.city, item.district].join('')
            console.log(address)
            if (
                (searchItem.searchAddress === '' && item.name.includes(searchItem.searchName))
                || (searchItem.searchName === '' && address === searchItem.searchAddress)
                || item.name.includes(searchItem.searchName) || address === searchItem.searchAddress) {
                searchTable.push(item);
            }
        });
        Store.dispatch(createSearchParkAction(searchTable))
    }
    const paginationProps = {
        current: 1, //当前页码
        pageSize: 3, // 每页数据条数
        total: bankTable.length, // 总条数
        // showTotal: () => (
        //     <span>总共{parkTable.length}项</span>
        // ),
        onChange: (page, pageSize) => (paginationProps.current = page), //改变页码的函数
        hideOnSinglePage: false,
        showSizeChanger: true,
        pageSizeOptions: [3, 6, 9, 12],
        onShowSizeChange: (current, size) => { paginationProps.pageSize = size }
    }
    // 表头
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            render: (text, record, index) => `${index + 1}`,
        },
        {
            title: '银行名称',
            dataIndex: 'name',
        },
        {
            title: '银行ID',
            dataIndex: 'id',
        },
        {
            title: '银行支行名称',
            dataIndex: 'branchName',
        },
        {
            title: '所属园区',
            dataIndex: 'park',
        },
        {
            title: '银行具体地址',
            dataIndex: 'address',
        },
        {
            title: '备注说明',
            dataIndex: 'note',
        },
        {
            title: '操作',
            dataIndex: 'handle',
            render: (row, record, index) => <><Button type="primary" onClick={() => {
                history.push('/bank/addbank', { data: { ...record }, isModify: true })
            }}>编辑</Button>
                <Button type="primary" danger onClick={() => {
                    delBank(record.name, record.key)
                }}>删除</Button></>,
        },
    ];


    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        }
    };
    return (
        <>
            <div className='content'>
                <Welcome />
                <Divider />
                <Title title='银行信息管理' />
                <Divider />
                {/* 查询区域 */}
                <div className='search-content'>
                    <div className='search'>
                        <div className='search-item'>
                            <span>所属园区</span>
                            <Input placeholder="请输入园区名称" value={searchName}
                                onChange={event => setSearchName(event.target.value)} />
                        </div>
                        <div className='search-item'>
                            <span>银行名称</span>
                            <Cascader options={options} onChange={value => setSearchAddress(value)} placeholder="Please select" value={searchAddress} />
                        </div>
                        <div className='search-item'>
                            <span>银行支行全称</span>
                            <Input placeholder="请输入园区名称" value={searchName}
                                onChange={event => setSearchName(event.target.value)} />
                        </div>
                    </div>
                    <Button type="primary" className='searchBtn' onClick={() => {
                        searchPark(searchName, searchAddress)
                    }}>搜索</Button>
                </div>
                <Divider />
                <Button type="primary" className='addBtn' onClick={() => {
                    history.push('/bank/addbank', { data: {}, isModify: false })
                }}>新增</Button>
                <Table
                    rowSelection={{
                        ...rowSelection,
                    }}
                    pagination={paginationProps}
                    columns={columns}
                    rowKey={() => newBankTable.key}
                    dataSource={newBankTable}
                />
            </div>

        </>
    )
}
export default BankManagement;
